<template>
  <div>
    <!-- https://juejin.cn/post/6928468842377117709 -->
    <h2>获取vuex里面设置的变量</h2>
    <p>名字1：{{ name1 }}</p>
    <p>名字2：{{ $store.state.name }}</p>
    <p>名字3：{{ name }}</p>
    <p>number:{{ number }}</p>
    <el-divider></el-divider>
    <h2>获取vuex里面设置的getters,类似计算属性</h2>
    <p>getters1:{{ $store.getters.getMessage }}</p>
    <p>getters2:{{ getMessage }}</p>
    <el-divider></el-divider>
    <el-button type="primary" size="small" @click="handClick"
      >改变number得值</el-button
    >
    <el-button type="primary" size="small" @click="handClick2"
      >改变number得值传参</el-button
    >
    <el-button type="primary" size="small" @click="handClick3"
      >异步改变number得值传参</el-button
    >
    <el-divider></el-divider>
    <p>store2中的名字：{{ store2name }}</p>
    <p>store2中的getters：{{ store2GetMsg }}</p>
    <p>store2中的number:{{ store2number }}</p>
    <el-button type="primary" size="small" @click="handClick4"
      >改变store2number得值</el-button
    >
    <el-button type="primary" size="small" @click="handClick5"
      >改变number得值传参</el-button
    >
    <el-button type="primary" size="small" @click="handClick6"
      >异步改变number得值传参</el-button
    >
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'day-10',
  computed: {
    name1() {
      return this.$store.state.name
    },
    // ...mapState({ aliasName: 'name', num: 'number' })

    ...mapState(['name', 'number']),
    // ...mapState('store2', { store2name: 'name' }),
    ...mapState('store2', ['store2name', 'store2number']),
    // ...mapGetters({ message: 'getMessage' })
    ...mapGetters(['getMessage']),
    ...mapGetters('store2', ['store2GetMsg'])
  },
  methods: {
    //  ...mapMutations({ setNumberIsAlias: 'setNumber' }),
    ...mapMutations(['setNumber']),
    ...mapMutations('store2', ['store2setNumber']),
    // ...mapActions({ setNumAlias: 'setNum' }),
    ...mapActions(['setNum']),
    ...mapActions('store2', ['store2setNum']),

    handClick() {
      this.setNumber()
      // this.$store.commit('setNumber')
    },
    handClick2() {
      // this.$store.commit('setNumber', 2)
      this.setNumber(2)
    },
    handClick3() {
      // this.$store.dispatch('setNum', 6)
      this.setNum(7)
    },
    handClick4() {
      // this.$store.commit('store2/store2setNumber')
      this.store2setNumber()
    },
    handClick5() {
      // this.$store.commit('setNumber', 2)
      this.store2setNumber(2)
    },
    handClick6() {
      // this.$store.commit('setNumber', 2)
      this.store2setNum(10)
    }
  },
  mounted() {
    // 注意不是$store.state了，而是$store.getters
    console.log(this.$store.state.name)
    console.log(this.$store.getters.getMessage)
    console.log(this.$store.state.store2.name) // 访问store2里面的name属性
  }
}
</script>

<style lang="scss" scoped>
</style>
